<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h3>行情记录器</h3>
      </el-header>
      <el-main>
        <div class="formDiv">
          <div>
            名称： <el-input v-model="data.name" clearable class="inp" autocomplete="off" />
            <el-button class="btn" type="primary" @click="searchRecord">搜索</el-button>
          </div>
          <el-button class="btn" @click="addRecord">添加</el-button>
        </div>
        <el-table :data="tableData" style="width: 120%">
          <el-table-column prop="create_time" label="创建时间" width="200">
            <template #default="scope">
              <div>{{ timeBender(scope.row.create_time) }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="secondary_upward_trend" label="次级回升">
            <template #default="scope">
              <div style="font-weight: 600; color: black">{{ scope.row.secondary_upward_trend }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="auto_upward_trend" label="自然回升">
            <template #default="scope">
              <div style="font-weight: 600; color: black">{{ scope.row.auto_upward_trend }}</div>
            </template></el-table-column
          >
          <el-table-column prop="upward_trend" label="上升趋势"
            ><template #default="scope">
              <div style="font-weight: 600; color: red">{{ scope.row.upward_trend }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="decline_trend" label="下降趋势"
            ><template #default="scope">
              <div style="font-weight: 600; color: green">{{ scope.row.decline_trend }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="auto_decline_trend" label="自然回撤">
            <template #default="scope">
              <div style="font-weight: 600; color: black">{{ scope.row.auto_decline_trend }}</div>
            </template></el-table-column
          >
          <el-table-column prop="secondary_decline_trend" label="次级回撤"
            ><template #default="scope">
              <div style="font-weight: 600; color: black">{{ scope.row.secondary_decline_trend }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="secondary_decline_trend" label="记录涨跌幅(%)"
            ><template #default="scope">
              <div v-if="scope.row.up_down_range > 0" style="color: red">{{ scope.row.up_down_range }}</div>
              <div v-else style="color: green">{{ scope.row.up_down_range }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="scope" label="当天涨跌幅" />
          <el-table-column prop="sector" label="板块" width="160" />
          <el-table-column fixed="right" prop="id" label="操作">
            <template #default="scope">
              <el-popconfirm title="确定删除当前记录?" @confirm="deleteRecored(scope.row.id)">
                <template #reference>
                  <el-button link type="primary" size="small">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="right"
          :page-sizes="[5, 10, 20, 30, 120]"
          background
          layout="sizes,prev, pager, next,"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-main>
    </el-container>
    <Add ref="addRef"></Add>
  </div>
</template>

<script lang="ts">
import advancedFormat from 'dayjs/plugin/advancedFormat'
import { defineComponent, reactive, ref } from 'vue'
import { queryRecord, removeRecord } from '@/api/user'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import Add from './Add.vue'
import { ElMessage } from 'element-plus'
export default defineComponent({
  components: { Add },
  setup() {
    const router = useRouter()
    let addRef: any = ref(null)
    const data = reactive({
      pageSize: 10,
      page: 1,
      total: 10,
      showAdd: false,
      name: '',
    })
    const loginCheck = window.sessionStorage.getItem('data')
    if (!loginCheck) {
      ElMessage.error('登陆失效')
      router.push('/')
    }
    const tableData = ref([])
    dayjs.extend(advancedFormat)
    async function addRecord() {
      addRef.value.showFlag = true
    }
    const goBack = () => {
      console.log('go back')
    }
    function timeBender(time: number) {
      return dayjs(time).format('YYYY年MM月DD日 HH:mm:ss')
    }
    async function getRecord() {
      let datas = await queryRecord(`?page=${data.page}&pageSize=${data.pageSize}&name=${data.name}`)
      tableData.value = datas.rows
      data.total = Number(datas.total)
    }
    async function deleteRecored(id: number) {
      console.log(id)
      let datas = await removeRecord({ id })
      if (datas.state === 200) {
        ElMessage.success(datas.msg)
        getRecord()
      }
    }
    function handleCurrentChange(val: number) {
      data.page = val
      getRecord()
    }
    function handleSizeChange(value: number) {
      data.pageSize = value
      getRecord()
    }
    function searchRecord() {
      data.page = 1
      getRecord()
    }
    getRecord()
    return {
      addRecord,
      goBack,
      tableData,
      data,
      handleSizeChange,
      handleCurrentChange,
      timeBender,
      deleteRecored,
      addRef,
      searchRecord,
    }
  },
})
</script>

<style scoped lang="less">
.el-header {
  line-height: 50px;
  height: 50px;
}

.formDiv {
  display: flex;
  justify-content: space-between;
  .btn {
    margin: 20px;
  }
  .inp {
    width: 200px;
    display: inline-block;
  }
}
.right {
  display: flex;
  justify-content: end;
  margin: 20px;
}
</style>
